

<template>
    <div class="container">
        <div :class="isCollapse?'menu-active':'menu'">
            <div class="el-sub-menu__title"
                @click="goHome()"
             style="background-color: rgb(48, 65, 86);">
                <el-icon><House /></el-icon>
                <span style="color: rgb(191, 203, 217);">
                    首页
                </span>
            </div>
            <el-menu
            background-color="rgb(48, 65, 86)"
            :collapse="isCollapse"
            :collapse-transition="false"
            @select="selectMenu"
            >
                <template v-for="(item,index) in menus">
                    <el-sub-menu
                    v-if="item.children.length > 0"
                    :index="String(index)">
                        <template #title>
                            <el-icon>
                                <i :class="`iconfont icon-${item.icon}`"></i>
                            </el-icon>
                            <span :style="{
                                color:'rgb(191, 203, 217)'
                            }">
                                {{ item.title }}
                            </span>
                        </template>
                        <el-menu-item-group>
                            <template v-for="(items,indxs) in item.children">
                                    <el-menu-item
                                        :index="index + '-' + indxs">
                                        <span :style="{
                                            color:'rgb(191, 203, 217)'
                                        }">
                                            <i :class="`iconfont icon-${items.icon}`"></i>
                                            {{ items.title }}
                                        </span>
                                    </el-menu-item>
                            </template>
                        </el-menu-item-group>
                    </el-sub-menu>
                </template>
            </el-menu>
        </div>
        <div class="content">
            <header>
                <div class="tab" 
                    @click="isCollapse = !isCollapse"
                >
                    <el-icon>
                        <Fold />
                    </el-icon>
                </div>
                <div class="head">
                    <el-dropdown @command="handleCommand">
                        <img :src="headImg" alt="">
                        <el-icon class="icon"><CaretBottom /></el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="a">首页</el-dropdown-item>
                                <el-dropdown-item command="b">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>                    
                </div>
            </header>
            <main>
                <router-view />
            </main>
        </div>
    </div>
</template>
<script setup>
    // 引入菜单接口
    import { getMenus } from "../../api/index";
    // 引入reactive 
    import {ref,reactive,onMounted} from 'vue';
    // 引入路由对象
    import router from '../../router/index'
    const menus = reactive([
        {
            title: '首页',
            name: 'home',
            children:[]
        }
    ]);

    // 头像
    const headImg = ref('');
    // 菜单是否折叠
    const isCollapse = ref(false);
    // 获取菜单信息和 头像信息
    const getMenusList = () => {
        getMenus().then(res => {
            setTimeout(() => {
                headImg.value = res.data.data.icon
                // 取出所有的parentId等于0的 
                res.data.data.menus.forEach(item => {
                    if(item.parentId == 0){
                        // 让当前子集为空数组
                        item.children = [];
                        menus.push(item)
                    }
                });
                // 逐级查找,
                menus.forEach(item => {
                    res.data.data.menus.forEach(items => {
                        if(item.id == items.parentId){
                            item.children.push(items)
                        }
                    });
                })
            }, 500);
        });
    }
    
    onMounted(() => {
        getMenusList();
    })

    const handleCommand = (command) => {
        console.log(command);
    }
    // 选择菜单跳转
    const selectMenu = (e) => {
        // 分割选择的导航下标
        let indexarr = e.split('-');
        let names = menus[indexarr[0]].children[indexarr[1]];
        // 跳转
        router.push({
            name:names.name
        })
    }


    const goHome = ()=> {
        router.push({
            name:'home'
        })
    }
</script>
<style lang="scss" scoped>
.container{
    display: flex;
    .menu,
    .menu-active{
        width: 180px;
        height: 100vh;
        overflow: scroll;
        background-color: rgb(48, 65, 86);
        transition: all 0.3s;
        &::-webkit-scrollbar{
            // 不显示滚动条
            display: none;
        }
    }
    .menu-active{
        width: 64px;
    }
    .content{
        flex: 1;
        header{
            padding: 3px;
            height: 50px;
            line-height: 48px;
            box-sizing: border-box;
            border-bottom: 1px solid #e6e6e6;
            display: flex;
            justify-content: space-between;
            .head{
                width: 80px;
                display: flex;
                img{
                    width: 43px;
                    height: 43px;
                }
                .icon{
                    position: relative;
                    top: 30px;
                }
            }
        }
        main{
            height: calc(100vh - 70px);
            padding: 10px;
            overflow-y: scroll;
            &::-webkit-scrollbar{
                display: flex;
            }
        }
    }
}

.iconfont{
    color: #e6e6e6;
    margin-right: 15px;
}
</style>